<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体查询_常用的阈值</title>
<!--    超小屏幕<768px
        768px<中等屏幕<992px
        992px<大屏幕:1200px
        超大屏幕>1200px
-->
    <link rel="stylesheet" href="css/huge.css">
    <link rel="stylesheet" href="css/large.css">
    <link rel="stylesheet" href="css/litter.css">
    <link rel="stylesheet" href="css/middle.css">
    <link rel="stylesheet" href="css/index.css">

    <style>

        /**{*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*}*/
        /*h1{*/
        /*    color: white;*/
        /*    background-color: gray;*/
        /*    text-align: center;*/
        /*    height: 200px;*/
        /*    line-height: 200px;*/
        /*}*/
        /*!*  超大屏幕*!*/
        /*@media screen and (min-width: 1200px) {*/
        /*    h1{*/
        /*        background-color: purple;*/
        /*    }*/

        /*}*/
        /*!*  大屏幕*!*/
        /*@media screen and (max-width: 1200px) and (min-width: 992px){*/
        /*    h1{*/
        /*        background-color: skyblue;*/
        /*    }*/
        /*}*/
        /*!*  中等屏幕*!*/
        /*@media screen and (max-width: 992px) and (min-width: 768px) {*/
        /*    h1{*/
        /*        background-color: orange;*/
        /*    }*/
        /*}*/
        /*!*超小屏幕*!*/
        /*@media screen and (max-width: 768px){*/
        /*    h1{*/
        /*        background-color: red;*/
        /*    }*/
        /*}*/

    </style>
</head>
<body>
<h1>你好啊</h1>
</body>
</html>